<template>
  <a-card>
    <a-row >
      <a-col :span="10">
        <a-card :title="cardName"  class='asset-card'>
          <template #extra>{{client}}</template>
          <a-row v-for='(item,index) in pieChartData' :key='index'>
            <a-col :span="6" class='number-type-name'>{{item.name}}</a-col>
            <a-col :span="18" class='number' >￥{{item.value}}</a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="14"> <div :style="{width:pieChartWidth,height: pieChartHeight}" :id='id'  class='main'></div></a-col>
    </a-row>
  </a-card>
</template>

<script>
export default {
  name: 'MultiplePieChart',
  props:{
    /**
     * 图示ID ID必须唯一
     */
    id:{
      type: String,
      request: true,
      default: 'MultiplePieChart'
    },
    /**
     * 图示宽度
     */
    pieChartWidth:{
      type: String,
      default: '800px'
    },
    /**
     * 图示高度
     */
    pieChartHeight: {
      type: String,
      default: '300px'
    },
    /**
     * 卡片标题
     */
    cardName:{
      type: String,
      request: true,
      default: null
    },
    /**
     * 项目部名称
     */
    client:{
      type: String,
      default: null,
      request: true
    },
    /**
     * 卡片数组
     */
    cardArray:{
      type:Array,
      default:null,
      request:true
    },
    /**
     *图示数组
     */
    pieChartData:{
      type: Array,
      default: null,
      request: true
    },
    /**
     * 图示标题
     */
    pieChartTitle:{
      type:String,
      default:null,
      request:true
    },
    /**
     * 图示副标题
     */
    pieChartSubtitle:{
      type:String,
      default:null,
      request:true
    }

  },
  methods:{
    initialize(){
      let chartDom = document.getElementById(this.id);
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: this.pieChartTitle,
          subtext: this.pieChartSubtitle,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} :￥ {c} <br/>占比:{d}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: this.pieChartTitle,
            type: 'pie',
            radius: '50%',
            data: this.pieChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.initialize()
  }
}
</script>

<style scoped>
.main{
  margin-top: 15%;
}
.number-type-name{
  font-weight: normal;
  font-size: 1.5vh;
  font-family: "Microsoft YaHei";
}
.number{
  font-weight: 80;
  font-size: 1.5vh;
  font-family: "Microsoft YaHei";
}
::v-deep .ant-card-meta-title{
  font-size: 3vh;
}
.asset-card{
  width: 50vh;
  height: 60vh;
  display: inline-block;
}
.asset-card{
  width: 50vh;
  height: 60vh;
  display: inline-block;
  background-image: url("https://img1.baidu.com/it/u=2029876347,2746803123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
  background-size: 100% 100%;
}
</style>